<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/getdate.js"></script>
    <title>华为太空表盘</title>
</head>
<style>
    body {
        padding: 0;
        margin: 0 auto;
        font-family: "Times New Roman", Times, serif;
        color: #3b3b3b;
    }

    .box-main {
        position: absolute;
        height: 100%;
        width: 100%;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .bp-border {
        width: 400px;
        border: 5px solid;
        height: 400px;
        border-radius: 50%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .middle-view {
        display: flex;
        border: 2px solid #1e1e1c;
        position: absolute;
        top: 20%;
        width: 100%;
        height: 60%;
    }

    .top-view {
        display: flex;
        position: absolute;
        top: 0%;
        width: 100%;
        height: 20%;
    }

    .top-left-view {
        width: 40%;
        height: 100%;
        border-right: 2px solid #1e1e1c;
        text-align: right;
    }

    .top-left-view>img {
        transform: rotateY(180deg);
        width: 25px;
        margin-top: 24px;
        margin-right: 8px;
    }

    .top-left-view>div {
        font-size: 26px;
        margin-top: -4px;
        margin-right: 22px;
        color: #3b3b3b;
    }

    .top-right-view {
        width: 70%;
        height: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .air-quality {
        margin-top: 13px;
        margin-left: 12px;
        font-size: 18px;
    }

    .weather-name {
        display: flex;
        margin-left: 12px;
        margin-right: 60px;
        line-height: 24px;
    }

    .weather-name>div:nth-child(1) {
        font-size: 18px;
        margin-right: 14px;
    }

    .weather-name>div:nth-child(2) {
        font-size: 20px;
    }

    .weather-name>img {
        margin-left: 2px;
        width: 28px;
        margin-top: -2px;
    }

    .temperature {
        display: flex;
        margin-top: -2px;
        margin-left: 12px;
        margin-right: 60px;
        line-height: 18px;
    }

    .temperature>div:nth-child(1) {
        font-size: 20px;
        margin-right: 21px;
    }

    .temperature>div:nth-child(2) {
        font-size: 20px;
    }

    .temperature>img {
        width: 28px;
        margin-left: 3px;
        margin-top: -3px;
    }

    .weather-icon>img {
        position: absolute;
        right: 77px;
        width: 37px;
        top: 38px;
    }

    .time {
        position: absolute;
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 5px;
        font-size: 95px;
        margin-top: 15px;
    }

    .second {
        margin-top: 32px;
        font-size: 61px;
    }



    .date {
        position: absolute;
        top: 84px;
        width: 100%;
        display: flex;
    }

    .date-left {
        font-size: 24px;
        margin-left: 29px;
        margin-top: 78px;
    }

    .date-right {
        position: absolute;
        right: 5px;
        font-size: 22px;
        margin-top: 41px;
    }

    .lunar-calendar {
        margin-right: 35px;
    }

    .dateandweek {
        margin-top: 13px;
        font-size: 22px;
    }

    .week-text {
        margin-left: -14px;
        margin-right: 8px;
    }

    .date-text {
        font-size: 22px;
    }

    .date-bottom {
        width: 100%;
        position: absolute;
        display: flex;
        font-size: 28px;
        top: 83%;
        margin-left: 44px;
        line-height: 32px;
    }

    .date-bottom>img {
        height: 30px;
    }

    .date-bottom>img:nth-child(1) {
        margin-right: 11px;
    }

    .bushu-img {
        margin-left: 153px;
        margin-right: 7px;
    }

    .center-tkr {
        position: absolute;
        width: 100%;
        display: flex;
        justify-content: center;
        z-index: -1;
        top: 36%;
    }

    .center-tkr>img {
        width: 242px;
        transform: rotateY(180deg);
    }

    .bottom-view {
        display: flex;
        position: absolute;
        top: 80%;
        width: 100%;
        height: 20%;
        justify-content: center;
    }

    .sleep {
        width: 30%;
        text-align: right;
    }

    .sleep>div {
        font-size: 19px;
        margin: 11px;
        margin-right: 5px;
    }

    .bottom-number {
        width: 40%;
    }

    .bottom-number>div:nth-child(1) {
        margin-top: 2px;
        width: 100%;
        height: 46%;
        border-bottom: 2px solid #1e1e1c;
        border-right: 2px solid #1e1e1c;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26px;
    }

    .bottom-number>div:nth-child(2) {
        width: 100%;
        height: 45%;
        border-left: 2px solid #1e1e1c;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26px;
    }

    .distance {
        width: 30%;
    }

    .distance>div {
        margin: 11px;
        font-size: 19px;
    }
</style>

<body>
    <!-- 表单的整体框架 -->
    <div class="box-main">
        <!-- 表单的外边框 -->
        <div class="bp-border">
            <!-- 头部电量和天气展示栏 -->
            <div class="top-view">
                <!-- 左上角电量栏 -->
                <div class="top-left-view">
                    <img src="./img/rocket-full.png">
                    <div>100%</div>
                </div>
                <!-- 右上角天气栏 -->
                <div class="top-right-view">
                    <div class="air-quality">空气优质</div>
                    <div class="weather-name">
                        <div>多云</div>
                        <div>26°</div>
                        <img src="./img/sanjiaoxing_shang_o.png">
                    </div>
                    <div class="temperature">
                        <div>25°</div>
                        <div>21°</div>
                        <img src="./img/sanjiaoxing_o.png">
                    </div>
                    <div class="weather-icon">
                        <img src="./img/cloud.png">
                    </div>
                </div>
            </div>
            <!-- 中间时间展示栏 -->
            <div class="middle-view">
                <!-- 头部展示时间 -->
                <div class="time">
                    <div class="hour">
                        15
                    </div>
                    <div>
                        :
                    </div>
                    <div class="minute">
                        23
                    </div>
                    <div class="second">
                        56
                    </div>
                </div>
                <!-- 日期和农历 -->
                <div class="date">
                    <!-- 左侧 -->
                    <div class="date-left">
                        <div>JavaScript</div>
                    </div>
                    <!-- 右侧 -->
                    <div class="date-right">
                        <div class="lunar-calendar">二月十二</div>
                        <div class="dateandweek">
                            <span class="week-text">周四</span>
                            <span class="date-text">3-11</span>
                        </div>
                    </div>
                </div>
                <!-- 底部心跳和步数 -->
                <div class="date-bottom">
                    <img src="./img/heart-rate-full.png">
                    <div>87</div>
                    <img src="./img/bushu.png" class="bushu-img">
                    <div>3299</div>
                </div>
                <!-- 中间旋转太空人 -->
                <div class="center-tkr">
                    <img src="./img/tkr.gif">
                </div>
            </div>
            <!-- 底部的睡眠和距离 -->
            <div class="bottom-view">
                <div class="sleep">
                    <div>
                        睡眠
                    </div>
                </div>
                <div class="bottom-number">
                    <div>
                        6h55m
                    </div>
                    <div>
                        6.5km
                    </div>
                </div>
                <div class="distance">
                    <div>
                        距离
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

<script>
    // 格式化时间
    function dateFormat(date) {
        // 格式化星期
        let weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
        const config = {
            // 月份
            MM: date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1,
            // 日
            DD: date.getDate() < 10 ? `0${date.getDate()}` : date.getDate(),
            // 时
            hh: date.getHours() < 10 ? `0${date.getHours()}` : date.getHours(),
            // 分
            mm: date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes(),
            // 秒
            ss: date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds(),
            // 星期
            week: weekday[date.getDay()],
            // 农历
            lunar: GetCNDate()
        };
        return config;
    }
    // 小时元素
    let hourHtml = document.querySelector(".hour");
    // 分钟元素
    let minuteHtml = document.querySelector(".minute");
    // 秒元素
    let secondHtml = document.querySelector(".second");
    // 农历元素
    let lunarCalendarHtml = document.querySelector(".lunar-calendar");
    // 星期元素
    let weekTextHtml = document.querySelector(".week-text");
    // 日期元素
    let dateTextHtml = document.querySelector(".date-text")

    // 给页面日期赋值
    function setHtmlValue() {
        let date = new Date;
        let config = dateFormat(date);
        hourHtml.innerHTML = config.hh;
        minuteHtml.innerHTML = config.mm;
        secondHtml.innerHTML = config.ss;
        weekTextHtml.innerHTML = config.week;
        dateTextHtml.innerHTML = `${config.MM}-${config.DD}`;
        lunarCalendarHtml.innerHTML = config.lunar.lunar.split(" ")[1];
    }
    // 进入页面就赋第一次值
    setHtmlValue()



    // 此后每隔一秒改变一次
    setInterval(() => {
        setHtmlValue()
    }, 1000)

</script>

</html>